<template>
  <body>
  <div>
    <div class="container">
      <i class="el-icon-menu item"></i>
      <div class="search-box">
        <input type="text" class="search-btn" placeholder="搜索">
      </div>
      <i class="el-icon-search item" type="big"></i>
    </div>
    <div class="timeBox"></div>
  </div>
  </body>
</template>
<script>
export default {
  name: "Search",
  mounted() {
    var searchBtn = document.querySelector('.search-btn')
    var style1 = document.createElement('style')
    var searchBox = document.querySelector('.search-box')
    var timeBox = document.querySelector('.timeBox')
    searchBtn.addEventListener('focus', function () {
      style1.innerHTML = "body::before{ filter: blur(20px); transform: scale(1.01);}";
      document.head.appendChild(style1);
      searchBox.style.width = '440px'
    })
    searchBtn.addEventListener('blur', function () {
      document.head.removeChild(style1);
      searchBox.style.width = ""
    })

    setInterval(function () {
      var date = new Date()
      let hh = padZero(date.getHours())
      let mm =padZero( date.getMinutes())
      let ss = padZero(date.getSeconds())
      timeBox.innerText = hh + ':' + mm + ':' + ss
    }, 1000)

    function padZero(n) {
      return n > 9 ? n : '0' + n
    }
  }
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
body::before{
  content: "";
  background: url(./bg.jpg) no-repeat center;
  background-size: auto;
  background-position: center;
  object-fit: cover;
  width: 150%;
  height: 150%;
  position: absolute;
  left: -50px;
  top: -50px;
  transition: all 0.2s ease-in-out;
}

.container{
  height: 60px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  padding: auto 10px;
  justify-content: space-around;
  align-items: center;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 5px 1px gray;
  z-index: 1;
}

.timeBox{
  position: absolute;
  background-color: transparent;
  height: 40px;
  top: 40%;
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 40px;
}
.search-box{
  width: 200px;
  transition: all 0.3s ease-in-out;
}
.container:hover .search-box{
  width: 440px;
}

.item{
  margin: auto 20px;
  font-size: 20px;
  opacity: 0;
  transition-delay: 0.3s;
  transition: all 0.3s ease;
}
.container:hover .item{
  opacity: 1;
}

.search-btn{
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  background: inherit;
  font-size: 20px;
  transition: all 0.5s ease-in-out;
}

.search-btn::placeholder{
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 0 10px #f3f3f3;
}
.container:hover .search-btn::placeholder{
  color: rgba(119, 119, 119, 0.9);
}
</style>
